<template>
  <el-drawer v-model="addDrawer" size="45%" :show-close="false" @opened="openDrawer" @close="closeDrawer">
    <template #title>
      <h2><svg-icon icon-class="list"></svg-icon><span style="padding-left: 15px">{{ typeName }}</span></h2>
      <el-button type="primary" @click="confirmClick" :disabled="drawerLoading" v-if="isShowSave">保存</el-button>
    </template>
    <template #default>
      <el-form :model="form" ref="addRef" :inline="true" :rules="formRules" label-width="140px" v-loading="drawerLoading">
        <el-row justify="space-between">
          <el-form-item label="省">
            <el-input v-model="form.province" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="市">
            <el-input v-model="form.city" clearable disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="区/县">
            <el-input v-model="form.county" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="编号" prop="id">
            <el-input v-model="form.id" placeholder="请输入编号" clearable maxlength="17"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="断层编号" prop="faultId">
            <el-input v-model="form.faultId" placeholder="请输入断层编号" clearable maxlength="17"></el-input>
          </el-form-item>
          <el-form-item label="断层来源" prop="faultSource">
            <dict-select code="FaultSourceCVD" :value="form.faultSource" @update="updateDict('faultSource', $event)"></dict-select>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="断层名称" prop="faultName" style="width: 100%">
            <el-input v-model="form.faultName" placeholder="请输入断层名称" :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea" show-word-limit maxlength="40" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="震级上限" prop="maxM">
            <el-input v-model="form.maxM" placeholder="请输入震级上限" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="危险类型" prop="riskType" style="width: 100%">
            <el-input v-model="form.riskType" placeholder="请输入危险类型" :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea" show-word-limit maxlength="40" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="50年内发生5.0级地震概率" prop="f5050">
            <el-input v-model="form.f5050" placeholder="请输入50年内发生5.0级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="100年内发生5.0级地震概率" prop="f10050">
            <el-input v-model="form.f10050" placeholder="请输入100年内发生5.0级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="50年内发生5.5级地震概率" prop="f5055">
            <el-input v-model="form.f5055" placeholder="请输入50年内发生5.5级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="100年内发生5.5级地震概率" prop="f10055">
            <el-input v-model="form.f10055" placeholder="请输入100年内发生5.5级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="50年内发生6.0级地震概率" prop="f5060">
            <el-input v-model="form.f5060" placeholder="请输入50年内发生6.0级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="100年内发生6.0级地震概率" prop="f10060">
            <el-input v-model="form.f10060" placeholder="请输入100年内发生6.0级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="50年内发生6.5级地震概率" prop="f5065">
            <el-input v-model="form.f5065" placeholder="请输入50年内发生6.5级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="100年内发生6.5级地震概率" prop="f10065">
            <el-input v-model="form.f10065" placeholder="请输入100年内发生6.5级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="50年内发生7.0级地震概率" prop="f5070">
            <el-input v-model="form.f5070" placeholder="请输入50年内发生7.0级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="100年内发生7.0级地震概率" prop="f10070">
            <el-input v-model="form.f10070" placeholder="请输入100年内发生7.0级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="50年内发生7.5级地震概率" prop="f5075">
            <el-input v-model="form.f5075" placeholder="请输入50年内发生7.5级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="100年内发生7.5级地震概率" prop="f10075">
            <el-input v-model="form.f10075" placeholder="请输入100年内发生7.5级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="50年内发生8.0级地震概率" prop="f5080">
            <el-input v-model="form.f5080" placeholder="请输入50年内发生8.0级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="100年内发生8.0级地震概率" prop="f10080">
            <el-input v-model="form.f10080" placeholder="请输入100年内发生8.0级地震概率" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="A值" prop="avalue">
            <el-input v-model="form.avalue" placeholder="请输入A值" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="B值" prop="bvalue">
            <el-input v-model="form.bvalue" placeholder="请输入B值" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="概率图像文件编号" prop="frequencyAiid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.frequencyAiid" placeholder="请输入概率图像文件编号" clearable
                maxlength="20"></el-input>
              <ImageUpload v-model="form.frequencyAiidName"
                @uploadImage="uploadSuccess('frequencyAiid', $event)"
                @delFile="deleteFile('frequencyAiid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="概率原始文件编号" prop="frequencyArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.frequencyArwid" placeholder="请输入概率原始文件编号" clearable
                maxlength="20"></el-input>
              <FileUpload v-model="form.frequencyArwidName"
                @uploadFile="uploadSuccess('frequencyArwid', $event)"
                @delFile="deleteFile('frequencyArwid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="备注" prop="commentInfo" style="width:100%">
            <el-input v-model="form.commentInfo" placeholder="请输入备注" :autosize="{ minRows: 6, maxRows: 12 }"
              type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </template>
  </el-drawer>
</template>
<script setup>
import useSpatialData from '@/hooks/useSpatialData'
import { rangeValidate, eightDouble } from '@/utils/validate'
const { route, addDrawer, drawerLoading, form, typeName, openDrawer, closeDrawer, confirmClick, uploadSuccess, deleteFile, updateDict, isShowSave } = useSpatialData()

const formRules = {
  id: [{ required: true, message: '请填写编号！', trigger: 'blur' }],
  faultId: [{ required: true, message: '请填写断层编号！', trigger: 'blur' }],
  faultName: [{ required: true, message: '请填写断层名称！', trigger: 'blur' }],
  maxM: [eightDouble],
  f5050: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f10050: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f5055: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f10055: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f5060: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f10060: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f5065: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f10065: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f5070: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f10070: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f5075: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f10075: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f5080: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  f10080: [eightDouble, { min: 0, max: 1, validator: rangeValidate }],
  avalue: [eightDouble],
  bvalue: [eightDouble],
}
</script>